<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	 <canvas id="canvas" style="border:  1px solid red;"></canvas>
	 <script>
	 	window.onload = function() {
	 		var canvas = document.getElementById("canvas");
	 		var cxt = canvas.getContext("2d");
	 		canvas.width = 400;
	 		canvas.height = 300;
		  
			createPolygon(cxt,5,100,75,50);
			cxt.fillStyle="hotpink";
			cxt.fill();
		   
		  function createPolygon(cxt,n,dx,dy,size){
			  cxt.beginPath();
			  var degree=(2*Math.PI)/n;
			  for(var i=0;i<n;i++){
				  var x=Math.cos(i*degree);
				  var y=Math.sin(i*degree);
				  cxt.lineTo(x*size+dx,y*size+dy);				 
			  }			  
			  cxt.closePath();
		  }
		   		
	 	}
	 </script>
	</body>
</html>
